import React, { Component } from 'react';
import { 
	Transfer,
	Modal, 
	Row,
	message
} from 'antd';
import {
	fieldRemoveJoin,
	resetFieldRemoveJoin,
} from 'src/services/DataManage';

interface Iprops {
    modalVisible:any
    modalVisibleValue:boolean
    componentData:any
    joinComponentFunc:any
	setOutDataFunc:any
}


class FeildRemove extends Component<Iprops,any> {
    state = {
    	targetKeys: [],
    	selectedKeys: [],
    	moveKeys: [],
    };

    handleChange = ( nextTargetKeys, direction, moveKeys ) => {
    	this.setState( { targetKeys: nextTargetKeys,moveKeys: moveKeys } );
    };

    handleSelectChange = ( sourceSelectedKeys, targetSelectedKeys ) => {
    	this.setState( { selectedKeys: [ ...sourceSelectedKeys, ...targetSelectedKeys ] } );

    };

    handleScroll = ( direction, e ) => {

    };
    
    handleOk = async () => {
    	if( this.state.targetKeys.length === 0 ) {
    		message.error( '请添加需要移除的字段' );
    		return ;
    	}
    	let data =  { 'fields': this.state.targetKeys,
    		'position': 1 };
    	let info = null;
    	if( this.props.componentData.edit ) {
    		const { code,name } = this.props.componentData;
    		info = await resetFieldRemoveJoin( { data: { ...data,componentCode: code,componentName: name } } );
    	}else {
    		info = await fieldRemoveJoin( { data: { ...data,'modelId': this.props.componentData.modelId, } } );
    	}
    	let delItem = this.props.componentData.model.fieldMappings.map( 
    		item => {item['key'] = item.tempFieldName ;return item;} 
    		).filter( item => this.state.targetKeys.includes( item.key ) );
    	if( this.props.componentData.delItem ) {
    		delItem = [ ...delItem,...this.props.componentData.delItem ];
    	}
    	if ( info.data.success ) {
    		const data = info.data.data;
    		let toData = { ...data,
    			delItem: delItem,
    			edit: this.props.componentData.edit,
    			moveKeys: this.state.moveKeys,
    			targetKeys: this.state.targetKeys,
    			nodeType: 'fieldRemove',
    			style: { 'primaryColor': '#0066FF' },
    			shape: 'SimplicityNode' };
    		this.props.joinComponentFunc( this.props.componentData,toData,{} );
    		this.handleCancel();
    	}
    }
    
    handleCancel = () => {
    	let data = this.props.componentData;
    	delete data.edit;
    	this.props.setOutDataFunc( data );
    	this.setState( { targetKeys: [], selectedKeys: [], moveKeys: [] } );
    	this.props.modalVisible( 'fieldRemoveVisible',false );
    }

    componentDidUpdate( prevProps: Readonly<Iprops>, prevState: Readonly<any>, snapshot?: any ): void {
    	if( this.props.modalVisibleValue!== prevProps.modalVisibleValue && this.props.componentData.targetKeys&&this.props.componentData.edit ) {
    		this.setState( {
    			targetKeys: this.props.componentData.targetKeys,
    		} );
    	}

    }
    
    
    render() {
    	const { targetKeys } = this.state;
    	let title = '移除字段';
    	if( this.props.componentData.edit ) {
    		title += ' (编辑)';
    	}
    	let dataSource = this.props.componentData.model.fieldMappings.map( item => {item['key'] = item.tempFieldName ;return item;} );
    	if( this.props.componentData.delItem ) {
    		dataSource = [ ...dataSource,...this.props.componentData.delItem ];
    	}
    	return (
    		<Modal title={title} mask={false} maskClosable={false}
    			visible={this.props.modalVisibleValue}
    			onOk={this.handleOk}
    			onCancel={this.handleCancel}
    			okText={'确定'} 
    			cancelText={'取消'}>
    			<Row>选择需要移除的字段</Row>
    			<Row>
    				<Transfer  dataSource={ [ ...dataSource ] }
    					titles={[ '保留的字段', '移除的字段' ]}
    					targetKeys={targetKeys}
    					// selectedKeys={selectedKeys}
    					onChange={this.handleChange}
    					listStyle={{
    						width: 210,
    					}}
    					onSelectChange={this.handleSelectChange}
    					onScroll={this.handleScroll}
    					render={item => item.finalFieldDesc}
    					style={{ marginBottom: 16,marginTop: 16 }}/>
    			</Row>
    		</Modal>
    	);
    }
}

export default FeildRemove;